/*小屏设备的时候: 注意用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面*/
/*手机端*/
@media (min-width: 375px) {
    #container,
    #header .header_content {
        width: 355px;
    }

    .header-opt .opt_ul .opt_li.extend {
        display: none;
    }

    .system_briefing {
        display: none;
    }

    .system_info {
        height: 210px;
    }

    .system_info .info_left .info_left_bottom {
        display: none;
    }

    .system_info .info_left .info_left_top {
        height: 200px;
    }

    .system_info .info_right {
        width: 100%;
    }

    #search_content .content_area .diary_item {
        width: 100%;
        margin: 0 auto;
        padding: 0 10px 20px 10px;
        float: left;
        background-color: #FFF;
    }

    #search_content .content_nav .filter_condition {
        width: 100%;
    }

    #search_content .content_nav .filter_condition .filter_ul .filter_li {
        padding: 0 5px;
    }

    .header-opt .opt_ul .opt_li {
        padding: 0 10px;
    }

    .user_pocket .pocket_item .item_bg {
        border-radius: 3px;
    }

    .user_pocket .pocket_item .item_name {
        display: none;
    }
}

@media (min-width: 768px) {
    #container,
    #header .header_content {
        width: 750px;
    }

    #nav_ul_li .nav_ul {
        width: 720px;
    }

    .header-opt .opt_ul .opt_li {
        padding: 0 20px;
    }

    .header-opt .opt_ul .opt_li.extend {
        display: block;
    }

    .user_pocket .pocket_item {
        width: 24%;
    }

    .system_info {
        height: 720px;
    }

    .system_info .info_left {
        width: 410px;
    }

    .system_info .info_left .info_left_bottom {
        display: block;
    }

    .system_info .info_left .info_left_top {
        height: 300px;
    }

    .system_info .info_right {
        width: calc(100% - 410px);
    }

    #search_content .content_area .diary_item {
        width: 50%;
        padding: 0 10px 20px 10px;
        float: left;
        background-color: #FFF;
    }

    .system_briefing .system_nav {
        padding: 0 18px;
    }

    #search_content .content_nav .filter_condition {
        width: 50%;
    }

    #search_content .content_nav .filter_condition .filter_ul .filter_li {
        padding: 0 5px;
    }

    .system_briefing {
        display: flex;
    }

    .system_briefing .briefing_box {
        width: 750px;
    }


    .user_pocket .pocket_item .item_name {
        display: block;
    }
}

@media (min-width: 992px) {
    #container,
    #header .header_content {
        width: 970px;
    }

    #nav_ul_li .nav_ul {
        width: 940px;
    }

    .header-opt .opt_ul .opt_li {
        padding: 0 20px;
    }

    .header-opt .opt_ul .opt_li.extend {
        display: block;
    }

    .user_pocket .pocket_item {
        width: 24%;
    }

    .system_info {
        height: 720px;
    }

    .system_info .info_left {
        width: 410px;
    }

    .system_info .info_left .info_left_bottom {
        display: block;
    }

    .system_info .info_left .info_left_top {
        height: 300px;
    }

    .system_info .info_right {
        width: calc(100% - 410px);
    }

    #search_content .content_area .diary_item {
        width: 33.333333333%;
        padding: 0 10px 20px 10px;
        float: left;
        background-color: #FFF;
    }

    .system_briefing .system_nav {
        padding: 0 20px;
    }

    #search_content .content_nav .filter_condition {
        width: 50%;
    }

    #search_content .content_nav .filter_condition .filter_ul .filter_li {
        padding: 0 10px;
    }

    .system_briefing {
        display: flex;
    }

    .system_briefing .briefing_box {
        width: 970px;
    }

    .user_pocket .pocket_item .item_name {
        display: block;
    }
}

@media (min-width: 1200px) {
    #container,
    #header .header_content {
        width: 1170px;
    }

    #nav_ul_li .nav_ul {
        width: 1140px;
    }

    .header-opt .opt_ul .opt_li {
        padding: 0 20px;
    }

    .header-opt .opt_ul .opt_li.extend {
        display: block;
    }

    .user_pocket .pocket_item {
        width: 24%;
    }

    .system_info {
        height: 720px;
    }

    .system_info .info_left {
        width: 410px;
    }

    .system_info .info_left .info_left_bottom {
        display: block;
    }

    .system_info .info_left .info_left_top {
        height: 300px;
    }

    .system_info .info_right {
        width: calc(100% - 410px);
    }

    #search_content .content_area .diary_item {
        width: 25%;
        padding: 0 10px 20px 10px;
        float: left;
        background-color: #FFF;
    }

    .system_briefing .system_nav {
        padding: 0 20px;
    }

    #search_content .content_nav .filter_condition {
        width: 50%;
    }

    #search_content .content_nav .filter_condition .filter_ul .filter_li {
        padding: 0 10px;
    }

    .system_briefing {
        display: flex;
    }

    .system_briefing .briefing_box {
        width: 1170px;
    }

    .user_pocket .pocket_item .item_name {
        display: block;
    }
}